<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        function jump() {
            // window.location.href = './index.html'
            var myP = document.getElementsByTagName('svg')[0];
            var widtha = $('.blocklyDraggable').width()
            console.log(widtha);
        }
    </script>
</head>

<body>


    <p style="width: 100px;height: 100px;">你好
    </p>
    <button onclick='jump()'>跳转</button>
    <h2>原始HTML</h2>

    <div class="nihao " style='width: 700px;'>
        <svg width="700px" height="100px">
            <g class="blocklyBlockCanvas">

                <g data-id="eMVw:l68qxczYcQx?1HQ" class="blocklyDraggable">
                    <path class="blocklyPathDark" transform="translate(1,1)" fill="#844966" d=" m 0,0  m 0,8 a 8 8 0 0,1 8,-8  h 7  l 6,4  3,0  6,-4  h 181.1854248046875  v 5  H 211.1854248046875  V 5  H 211.1854248046875  c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5  v 26  H 211.1854248046875  V 46  V 50  h -181.6854248046875  l -6,4  -3,0  -6,-4  h -14.5  H 0 z
            "></path>
                    <path class="blocklyPath" stroke="none" fill="#a55b80" d=" m 0,0  m 0,8 a 8 8 0 0,1 8,-8  h 7  l 6,4  3,0  6,-4  h 181.1854248046875  v 5  H 211.1854248046875  V 5  H 211.1854248046875  c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5  v 26  H 211.1854248046875  V 46  V 50  h -181.6854248046875  l -6,4  -3,0  -6,-4  h -14.5  H 0 z
            "></path>
                    <path class="blocklyPathLight" stroke="#c08ca6" d=" m 0,0  m 0.5,8 a 7.5 7.5 0 0,1 8,-7.5  H 14.5  h 0.5  l 6,4  3,0  6,-4  H 210.6854248046875  H 210.6854248046875  M 211.1854248046875,5  m -5,14.3  l 3.68,-2.1  M 0.5,49.5  V 8 
            "></path>
                    <g transform="translate(10,5)"><text class="blocklyText" x="0" y="15">赋值</text></g>
                    <g class="blocklyEditableText" transform="translate(44.319976806640625,5)" style="cursor: default;">
                        <rect rx="4" ry="4" x="0" y="0" height="19" width="129.20545959472656"
                            class="blocklyFieldRect blocklyDropdownRect" stroke="#c08ca6" fill="transparent"></rect>
                        <text class="blocklyText blocklyDropdownText" text-anchor="start" x="5" y="15">工资个人所得税<tspan
                                style="fill: rgb(165, 91, 128);"> ▾</tspan></text>
                        <image style="display: none;"></image>
                    </g>
                    <g transform="translate(178.5254364013672,5)"><text class="blocklyText" x="0" y="15">为</text>
                    </g>
                    <g data-id="_6cwHm8{phIjEafl}WLf" class="blocklyDraggable" transform="translate(0,51)">
                        <path class="blocklyPathDark" transform="translate(1,1)" fill="#844966" d=" m 0,0  h 15  l 6,4  3,0  6,-4  h 181.1854248046875  v 5  H 211.1854248046875  V 5  H 211.1854248046875  c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5  v 4  H 211.1854248046875  V 24  V 28  h -181.6854248046875  l -6,4  -3,0  -6,-4  h -6.5 a 8 8 0 0,1 -8,-8 z
            "></path>
                        <path class="blocklyPath" stroke="none" fill="#a55b80" d=" m 0,0  h 15  l 6,4  3,0  6,-4  h 181.1854248046875  v 5  H 211.1854248046875  V 5  H 211.1854248046875  c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5  v 4  H 211.1854248046875  V 24  V 28  h -181.6854248046875  l -6,4  -3,0  -6,-4  h -6.5 a 8 8 0 0,1 -8,-8 z
            "></path>
                        <path class="blocklyPathLight" stroke="#c08ca6" d=" m 0,0  m 0.5,0.5  H 14.5  h 0.5  l 6,4  3,0  6,-4  H 210.6854248046875  H 210.6854248046875  M 211.1854248046875,5  m -5,14.3  l 3.68,-2.1  M 0,28  m 2.6966991411008934,-2.6966991411008934 a 7.5 7.5 0 0,1 -2.1966991411008934,-5.303300858899107  V 0.5 
            "></path>
                        <g transform="translate(10,5)"><text class="blocklyText" x="0" y="15">赋值</text></g>
                        <g class="blocklyEditableText" transform="translate(44.319976806640625,5)"
                            style="cursor: default;">
                            <rect rx="4" ry="4" x="0" y="0" height="19" width="129.20545959472656"
                                class="blocklyFieldRect blocklyDropdownRect" stroke="#c08ca6" fill="transparent">
                            </rect>
                            <text class="blocklyText blocklyDropdownText" text-anchor="start" x="5" y="15">工资个人所得税
                                <tspan style="fill: rgb(165, 91, 128);"> ▾</tspan></text>
                            <image style="display: none;"></image>
                        </g>
                        <g transform="translate(178.5254364013672,5)"><text class="blocklyText" x="0" y="15">为</text>
                        </g>
                        <g data-id="|uiJUyKSUKQaElMpfjcu" class="blocklyDraggable blocklySelected"
                            transform="translate(204.1854248046875,0)" style="display: block;">
                            <path class="blocklyPathDark" transform="translate(1,1)" fill="#498452" d=" m 8,0  h 122.61991882324219  v 5  H 130.6199188232422  V 5  H 130.6199188232422  V 24  H 130.6199188232422  V 24  V 28  h -122.61991882324219  H 8  V 20  c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5 z
            "></path>
                            <path class="blocklyPath" stroke="none" fill="#5ba567" d=" m 8,0  h 122.61991882324219  v 5  H 130.6199188232422  V 5  H 130.6199188232422  V 24  H 130.6199188232422  V 24  V 28  h -122.61991882324219  H 8  V 20  c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5 z
            "></path>
                            <path class="blocklyPathLight" stroke="#8cc095" d=" m 8,0  m 0.5,0.5  H 130.1199188232422  H 130.1199188232422  M 8.5,27.5  M 8.5,27.5  V 20  v -1.5  m -7.36,-0.5  q -1.52,-5.5  0,-11  m 7.36,1  V 0.5 
            "></path>
                            <g transform="translate(18,5)"><text class="blocklyText" x="0" y="15">已纳个人所得说</text></g>
                        </g>
                    </g>
                    <g data-id="*XEoh+y0sD,[v^-Hj2m[" class="blocklyDraggable"
                        transform="translate(204.1854248046875,0)" style="display: block;">
                        <path class="blocklyPathDark" transform="translate(1,1)" fill="#495284"
                            d=" m 8,0  h 427.2641906738281  v 5  H 435.2641906738281  V 5  H 435.2641906738281  V 46  H 435.2641906738281  V 46  V 50  h -427.2641906738281  H 8  V 20  c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5 z
             M 24,5  v 5  c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5  v 10  h 109.95993041992188  v -30 z M 187.4187774658203,5  v 5  c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5  v 21  h 237.8454132080078  v -41 z">
                        </path>
                        <path class="blocklyPath" stroke="none" fill="#5b67a5"
                            d=" m 8,0  h 427.2641906738281  v 5  H 435.2641906738281  V 5  H 435.2641906738281  V 46  H 435.2641906738281  V 46  V 50  h -427.2641906738281  H 8  V 20  c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5 z
             M 24,5  v 5  c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5  v 10  h 109.95993041992188  v -30 z M 187.4187774658203,5  v 5  c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5  v 21  h 237.8454132080078  v -41 z">
                        </path>
                        <path class="blocklyPathLight" stroke="#8c95c0"
                            d=" m 8,0  m 0.5,0.5  H 434.7641906738281  H 434.7641906738281  M 8.5,49.5  M 8.5,49.5  V 20  v -1.5  m -7.36,-0.5  q -1.52,-5.5  0,-11  m 7.36,1  V 0.5 
             M 134.45993041992188,5.5  v 30  h -109.95993041992188  M 24,10  m -5,14.3  l 3.68,-2.1  M 425.7641906738281,5.5  v 41  h -237.8454132080078  M 187.4187774658203,10  m -5,14.3  l 3.68,-2.1 ">
                        </path>
                        <g class="blocklyEditableText" transform="translate(138.95993041992188,10)"
                            style="cursor: default;">
                            <rect rx="4" ry="4" x="0" y="0" height="19" width="37.45884704589844"
                                class="blocklyFieldRect blocklyDropdownRect" stroke="#8c95c0" fill="transparent">
                            </rect>
                            <text class="blocklyText blocklyDropdownText" text-anchor="start" x="5" y="15">+<tspan
                                    style="fill: rgb(91, 103, 165);"> ▾</tspan></text>
                            <image style="display: none;"></image>
                        </g>
                        <g data-id="@eCa~R1*lQ4*U$.0TpHJ" class="blocklyDraggable" transform="translate(17,6)"
                            style="display: block;">
                            <path class="blocklyPathDark" transform="translate(1,1)" fill="#498452" d=" m 8,0  h 107.95993041992188  v 5  H 115.95993041992188  V 5  H 115.95993041992188  V 24  H 115.95993041992188  V 24  V 28  h -107.95993041992188  H 8  V 20  c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5 z
            "></path>
                            <path class="blocklyPath" stroke="none" fill="#5ba567" d=" m 8,0  h 107.95993041992188  v 5  H 115.95993041992188  V 5  H 115.95993041992188  V 24  H 115.95993041992188  V 24  V 28  h -107.95993041992188  H 8  V 20  c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5 z
            "></path>
                            <path class="blocklyPathLight" stroke="#8cc095" d=" m 8,0  m 0.5,0.5  H 115.45993041992188  H 115.45993041992188  M 8.5,27.5  M 8.5,27.5  V 20  v -1.5  m -7.36,-0.5  q -1.52,-5.5  0,-11  m 7.36,1  V 0.5 
            "></path>
                            <g transform="translate(18,5)"><text class="blocklyText" x="0" y="15">年度子女教育</text></g>
                        </g>
                        <g data-id="4y$y^1yqzD5#fo*#*,{|" class="blocklyDraggable"
                            transform="translate(180.4187774658203,6)" style="display: block;">
                            <path class="blocklyPathDark" transform="translate(1,1)" fill="#498452" d=" m 8,0  h 235.8454132080078  v 5  H 243.8454132080078  V 5  H 243.8454132080078  V 35  H 243.8454132080078  V 35  V 39  h -235.8454132080078  H 8  V 20  c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5 z
             M 136.6199188232422,5  v 5  c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5  v 10  h 97.22549438476562  v -30 z">
                            </path>
                            <path class="blocklyPath" stroke="none" fill="#5ba567" d=" m 8,0  h 235.8454132080078  v 5  H 243.8454132080078  V 5  H 243.8454132080078  V 35  H 243.8454132080078  V 35  V 39  h -235.8454132080078  H 8  V 20  c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5 z
             M 136.6199188232422,5  v 5  c 0,10  -8,-8  -8,7.5  s 8,-2.5  8,7.5  v 10  h 97.22549438476562  v -30 z">
                            </path>
                            <path class="blocklyPathLight" stroke="#8cc095" d=" m 8,0  m 0.5,0.5  H 243.3454132080078  H 243.3454132080078  M 8.5,38.5  M 8.5,38.5  V 20  v -1.5  m -7.36,-0.5  q -1.52,-5.5  0,-11  m 7.36,1  V 0.5 
             M 234.3454132080078,5.5  v 30  h -97.22549438476562  M 136.6199188232422,10  m -5,14.3  l 3.68,-2.1 ">
                            </path>
                            <g transform="translate(18,10)"><text class="blocklyText" x="0" y="15">计算个人所得税</text>
                            </g>
                            <g data-id="hLEW)nB1~`=+D3yFd_Dq" class="blocklyDraggable"
                                transform="translate(129.6199188232422,6)" style="display: block;">
                                <path class="blocklyPathDark" transform="translate(1,1)" fill="#844966" d=" m 8,0  h 95.22549438476562  v 5  H 103.22549438476562  V 5  H 103.22549438476562  V 24  H 103.22549438476562  V 24  V 28  h -95.22549438476562  H 8  V 20  c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5 z
            "></path>
                                <path class="blocklyPath" stroke="none" fill="#a55b80" d=" m 8,0  h 95.22549438476562  v 5  H 103.22549438476562  V 5  H 103.22549438476562  V 24  H 103.22549438476562  V 24  V 28  h -95.22549438476562  H 8  V 20  c 0,-10  -8,8  -8,-7.5  s 8,2.5  8,-7.5 z
            "></path>
                                <path class="blocklyPathLight" stroke="#c08ca6" d=" m 8,0  m 0.5,0.5  H 102.72549438476562  H 102.72549438476562  M 8.5,27.5  M 8.5,27.5  V 20  v -1.5  m -7.36,-0.5  q -1.52,-5.5  0,-11  m 7.36,1  V 0.5 
            "></path>
                                <g class="blocklyEditableText" transform="translate(13,5)" style="cursor: default;">
                                    <rect rx="4" ry="4" x="0" y="0" height="19" width="85.22549438476562"
                                        class="blocklyFieldRect blocklyDropdownRect" stroke="#c08ca6"
                                        fill="transparent">
                                    </rect><text class="blocklyText blocklyDropdownText" text-anchor="start" x="5"
                                        y="15">工资标准<tspan style="fill: rgb(165, 91, 128);"> ▾</tspan></text>
                                    <image style="display: none;"></image>
                                </g>
                            </g>
                        </g>
                    </g>
                </g>
            </g>
        </svg>

    </div>

    <h2 class="toCanvas"> <a href="javascript:void(0);"> 转成canvas </a></h2>
    <h2 class="toPic"><a href="javascript:void(0);"> 转成图片 </a></h2>
    <h5>
        <label for="imgW">宽度:</label>
        <input type="number" value="" id="imgW" placeholder="默认是原图宽度" />
        <label for="imgH">高度:</label>
        <input type="number" value="" id="imgH" placeholder="默认是原图高度" />
        <label for="imgFileName">文件名:</label>
        <input type="text" placeholder="文件名" id="imgFileName" />
        <select id="sel">
            <option value="png">png</option>
            <option value="jpeg">jpeg</option>
            <option value="bmp">bmp</option>
        </select>
        <button id="save">保存</button>
    </h5>
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript" src="./html2canvas.min.js"></script>
    <script type="text/javascript" src="./canvas2image.js"></script>
    <script type="text/javascript">
        var test = $(".nihao").get(0); //将jQuery对象转换为dom对象
        // 点击转成canvas
        $('.toCanvas').click(function (e) {
            // 调用html2canvas插件
            console.log(e);
            html2canvas(test).then(function (canvas) {
                // canvas宽度
                var canvasWidth = canvas.width;
                // canvas高度
                var canvasHeight = canvas.height;
                // 渲染canvas
                $('.toCanvas').after(canvas);
                // 显示‘转成图片’按钮
                $('.toPic').show(1000);
                // 点击转成图片
                $('.toPic').click(function (e) {
                    // 调用Canvas2Image插件
                    var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
                    // 渲染图片
                    $(".toPic").after(img);
                    // 点击保存
                    $('#save').click(function (e) {
                        let type = $('#sel').val(); //图片类型
                        let w = $('#imgW').val(); //图片宽度
                        let h = $('#imgH').val(); //图片高度
                        let f = $('#imgFileName').val(); //图片文件名
                        w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空，为空时保持原来的值
                        h = (h === '') ? canvasHeight : h;
                        // 调用Canvas2Image插件
                        Canvas2Image.saveAsImage(canvas, w, h, type, f);
                    });
                });


            });
        });
    </script>

</body>

</html>